<template>
  <div class="app-container">
     <!-- 标题 -->
   	<header class="app-header">
    	<span class="title">{{$route.meta.title}}</span>
			<el-button type="primary" icon="el-icon-edit" @click.native="goToComment">评论列表</el-button>
      <el-button type="danger" icon="el-icon-delete" @click.native="allDelItem">批量删除</el-button>
    </header> 
    <el-form :inline="true" :model="listQuery" class="query-form">
      <el-form-item>
        <el-input v-model="listQuery.title" :clearable = "true" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item>
      	<el-cascader :options="categories" :props="cateProps"  v-model="listQuery.categories"></el-cascader>
      </el-form-item>      
      
      <el-form-item>
        <el-button-group>
          <el-button type="primary" icon="el-icon-search"  @click="onSubmit">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh"  @click="onSubmit">刷新</el-button>
        </el-button-group>
      </el-form-item>
    </el-form> 
    <!-- 表单 -->
    
    <el-table v-loading="loading" :data="list" border  @selection-change="handleSelectionChange">
      <el-table-column align="center" width="50" type="selection"></el-table-column>
      <el-table-column align="center"  label="标题" prop="title" show-overflow-tooltip>
			</el-table-column>
      <el-table-column align="center"  label="分类" prop="categories" show-overflow-tooltip>
				<template slot-scope="scope">
        	 {{ scope.row.categories | parseCate(categories)}}
        </template>
			</el-table-column>
  		<el-table-column align="center" label="点赞数" prop="likeNum" width="80"></el-table-column>
      <el-table-column align="center" label="浏览数" prop="clickNum" width="80"></el-table-column>
      
      
      <el-table-column align="center" label="状态" prop="status"  width="80" >
        <template slot-scope="scope">
          <span style="color:red" v-if="scope.row.status == '0'">未发布</span>
          <span style="color:green" v-else-if="scope.row.status == '1'">已发布</span>
        </template>
      </el-table-column>
 
			<el-table-column align="center" label="修改时间" prop="updateDate"  show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.updateDate | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>        
      </el-table-column>  
      
			<el-table-column align="center" label="创建时间" prop="created"  show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.created | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>        
      </el-table-column>   
      
      
      <el-table-column align="center"  label="操作">
      	<el-button-group slot-scope="scope">
   				<el-button type="primary" size="mini" @click.native.prevent="editWare(scope.row,scope.$index)">编辑</el-button> 
          <el-button type="danger" size="mini"  @click.native.prevent="handleDel(scope.$index, scope.row)">删除</el-button> 
        </el-button-group>
      </el-table-column>      
         
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList"/>
    
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import request from '@/utils/request'
import config from '@/api/bgapi'
import { parseTime } from '@/utils'
export default {
  components: { Pagination},
  data() {
    return {
      loading: false,
			categories:[],
			cateProps:{children: 'children', label: 'cateName' ,value:'id'},
      list:[],
      total: 0,
      listQuery: {
        title: '',
        page: this.$route.query.page?Number(this.$route.query.page):1,
        pageSize: 20
      }
    }
  },
  mounted(){
    this.selectItme = [];
    this.getList();
		this.getcontentCate();
  },
  methods: {
		async getcontentCate(){
			var res = await request.get(config.contentCate);	
			if(res.code == '20000'){
				this.categories = res.data;	
			}
		},
    onSubmit() {
      this.getList()
    },
    async getList() {
      this.loading = true;
      var res = await request.get(config.content,{ params:this.listQuery } );
      this.loading = false;
      this.list = res.data || [];
      this.total = res.totalNum || 0;
    },
    handleSelectionChange(val){
      this.selectItme = val;
    },
    allDelItem(){
      if(this.selectItme.length == 0){return}
      this.$confirm("确认删除所选记录吗?", "提示", {
          type: "warning",
      })
      .then(async () => {
          let _ids = this.selectItme.map((item,index) =>{ return item.id});
          var res = await request.post(config.delManyContent,{ids:_ids});
          if(res.code == '20000'){
            this.$message.success("删除成功");  
            this.getList();	
          }
      })
      .catch(() => {
          this.$message.info("取消删除");
      });
    },
    handleDel(index, row){
      if (row.id) {
        this.$confirm("确认删除该记录吗?", "提示", {
            type: "warning",
        })
        .then(async () => {
            var res = await request.delete(config.content+'/'+row.id);
            if(res.code == '20000'){
              this.$message.success("删除成功");  
              this.getList();	
            }
        })
        .catch(() => {
            this.$message.info("取消删除");
        });
      }
    },
		goToComment(){
			this.$router.push({path:'/content/list/comment'});
		},
    async editWare(row,index){
			this.$router.push({path:'/content/list/edit',query: {id:row.id}})
    }
  },
  filters: {
		parseCate(cateIds,cateArr){
			var arr = cateIds;
			var data = cateArr;
			function getCity(arr, data, city = []) {
				if (typeof data === "object") {
						for (let i = 0; arr[i] !== undefined; i++) {
								for (let j = 0; data[j] !== undefined; j++) {
										if (arr[i] === data[j].id) {
												city.push(data[j].cateName);
										}
								}
						};
						for (let i = 0; data[i] !== undefined; i++) {
								getCity(arr, data[i].children, city);
						};
				}
				return city;
			}

			var str = getCity(arr,data).join('/')
			
			return str;
		}
  },  
}
</script>
<style scoped>
.video-box{ width: 50%;;}
.video-dialog >>> .el-dialog{width: 50%;  background:#F1F3F4; border-radius: 5px;}
.video-dialog >>> .el-dialog__header{ display: none;}
.video-dialog >>> .el-dialog__body{ width: 100%; height: 100%; padding: 0;}
.video-box{width: 100%; height: 100%; z-index: 88; border-radius: 5px; overflow: hidden; vertical-align: middle; outline: none; background:rgba(0, 0, 0, 0);}
.video-close{ font-size: 30px; z-index: 99;  position: absolute; top:-15px; right:-15px; cursor: pointer; background:#fff; border-radius: 30px;}

.img-view >>> .el-icon-circle-close {color: #5F6266; background: #fff; border-radius: 50%;}

</style>